<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import="com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />

<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>

<script type="text/javascript">
	var jsonObj;
	var x;
	
	function inputModal(row) {
		// 		alert("1111111111111");
		var b = document.getElementById("date").value;
		// 		alert(b);
		var i = row.parentNode.parentNode.rowIndex - 1;
		// 		alert(i);
		var nrow = row.parentNode.parentNode.rowIndex;
		var tab = document.getElementById("table1");
		var name = tab.rows[nrow].cells[1].innerHTML;
		var scoretemp = tab.rows[nrow].cells[3].innerHTML;
		var select = document.getElementsByName("score");
		if (scoretemp == "") {
			select[3].checked = true;

		} else {
			for (var j = 0; j < select.length; j++) {
				if (select[j].value == scoretemp) {
					select[j].checked = true;
					break;

				}

			}

		}
// 		alert("-------i= "+i);
// 		alert("-------answer= "+jsonObj[i].answer);
		document.getElementById("stuName").value = name;
		document.getElementById("modaldate").value = b;
		// 		alert(document.getElementById("modaldate").value);
		document.getElementById("tarea2").value = jsonObj[i].answer;
		document.getElementById("modaluserid").value = jsonObj[i].userId;
		document.getElementById("tarea3").value = "";
		if (jsonObj[i].valid == 0) {
			document.getElementById("scorea").style.display = "none";

		} else {
			document.getElementById("scorea").style.display = "";

		}
		// 			document.getElementById("date").value;

	}
	function selectbydate() {

		var a = document.getElementById("date").value;
		// 		alert(a);
		deleteall();
		var r = document.getElementById("date").value;

		x = "{\"opreation\" :\"updateTable\",\"date\" :\"" + r + "\"}";

		// 	json1 = new JSONObject();
		// 		json1.put("opreation", "updateTable");
		// 		json1.put("date", document.getElementById("date").value);
		// 		x = json1.toString();
		ajaxCall("post", "../SelfExamGradeServlet", getmassage);

	}

	function getmassage(result) {

		jsonObj = JSON.parse(result);
		//alert(jsonObj.length);
		if (jsonObj[0].question.length > 1) {
			document.getElementById("tarea1").style.display = "";
			document.getElementById("tarea1").value = jsonObj[0].question;
			document.getElementById("text1").style.display = "none";
			for (var k = 0; k < jsonObj.length; k++) {
				addRow(k);
			}
		} else {
			document.getElementById("text1").style.display = "";
		}

	}
	function addRow(index) {
		var table = document.getElementById("table1");
		var newTr = table.insertRow();
		var newTd0 = newTr.insertCell();
		var newTd1 = newTr.insertCell();
		var newTd2 = newTr.insertCell();
		var newTd3 = newTr.insertCell();
		var newTd4 = newTr.insertCell();
		newTd0.innerText = jsonObj[index].userId;
		newTd1.innerText = jsonObj[index].stuName;
		newTd2.innerText = jsonObj[index].totalTime;
		// 		alert(jsonObj[i].score);
		if (jsonObj[index].score == null) {
			newTd3.innerText = "";
		} else {
			newTd3.innerText = jsonObj[index].score;
		}

		newTd4.innerHTML = '<button onclick="inputModal(this)" class="btn btn-success" data-toggle="modal" data-target="#myModal">详情</button>';
	}

	function deleteall() {
		var table = document.getElementById("table1");
		var rows = table.rows.length;

		for (var m = rows - 1; m > 0; m--) {
			document.getElementById("table1").deleteRow(m);
		}
		document.getElementById("tarea1").style.display = "none";
		document.getElementById("tarea1").value = "";
	}
	function submitmassage() {
		// 		json = new JSONObject();
		// 		json.put("opreation", "submit");
		// 		json.put("comment", document.getElementById("tarea3").value);
		// 		json.put("score", document.getElementById("scorea1").value);
		// 		json.put("userId", document.getElementById("modaluserid").value);
		// 		json.put("date", document.getElementById("modaldate").value);	
		// 		var radio = document.getElementsByName("score");
		// 		for (i = 0; i < radio.length; i++) {
		// 			if (radio[i].checked) {
		// 				var tab = document.getElementById("table1");
		// 				tab.rows[row].cells[2].innerHTML = radio[i].value;
		// 			}
		// 		}
		// 		var score = tab.rows[row].cells[2].innerHTML;

		var r = document.getElementById("tarea3").value;
		var radio = document.getElementsByName("score");
		var o = "D";
		for (var n = 0; n < radio.length; n++) {
			if (radio[n].checked) {
				o = radio[n].value;
			}
		}
		var t = document.getElementById("modaluserid").value;
		var k = document.getElementById("date").value;

		x = "{\"opreation\":\"submit\",\"comment\":\"" + r + "\",\"score\":\""
				+ o + "\",\"userId\":\"" + t + "\",\"date\":\"" + k + "\"}";
		// 		    "{\"score    \":\""+score+"\",\"comment\":\""+comment+"\",\"targetdate\":\""+targetdate+"\",\"stuIds\":\""+stuIds+"\"}";
		ajaxCall("post", "../SelfExamGradeServlet", selectbydate);

	}

	function ajaxCall(method, url, callBackFunction) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, true);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(x);
	}

	function setRank() {
		var operation = "sRank";
		ajaxCall("post", "../SelfExamGradeServlet?operation=" + operation,
				alertResult);
	}

	function alertResult(result) {
		alert(result);
	}
<%User user = (User) request.getSession().getAttribute("user");
			String img = (String) user.getImg();%>
	
</script>

<body>
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>























					
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>


					<!-- 					<li><a href="../index.jsp"><i -->
					<!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
					<!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
					<!-- 							个人信息</a></li> -->
					<li><a href="TeacherSelfExam.jsp"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="TeamGrade.jsp"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="grouping.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="StudentScore.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="DataBaseSelect.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
					<!-- 					<li><a href="ChangePassword.jsp"><i -->
					<!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->


				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h2>个人竞赛作业批改</h2>
						<h5></h5>
						<p>
							日期：<input type="date" id="date" /> <input type="button"
								onclick="selectbydate()" value="查找" />
						</p>
						<div id="text1" style="display: none;">今天没人做事</div>


						<div class="row" style="padding: 50px 20px 0px 20px">
							<textarea id="tarea1" rows="15" cols="100" style="display: none;"
								style="background: transparent" disabled="true"></textarea>
							<div class="table-responsive">
								<table class="table table-striped" id="table1"
									style="text-align: center">
									<thead>
										<tr>
											<th style="text-align: center">ID</th>
											<th style="text-align: center">姓名</th>
											<th style="text-align: center">用时(min)</th>
											<th style="text-align: center">评分</th>
											<th style="text-align: center">进行评价</th>

										</tr>
										<!-- 										<tr> -->
										<!-- 											<td>1111</td> -->
										<!-- 											<td>1111</td> -->
										<!-- 											<td>1111</td> -->
										<!-- 											<td>1111</td> -->
										<!-- 											<td><button onclick="inputModal(this	)" -->
										<!-- 													class="btn btn-success" data-toggle="modal" -->
										<!-- 													data-target="#myModal">详情</button></td> -->
										<!-- 										</tr> -->
									</thead>
								</table>

								<div></div>
							</div>
							<div class="col-sm-offset-5 col-sm-7">
								<button class="btn btn-primary" onclick="setRank()">生成结果</button>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- /. PAGE INNER  -->
		</div>


		<!-- /. PAGE WRAPPER  -->
	</div>
	<!-- /. WRAPPER  -->
	<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
	<!-- JQUERY SCRIPTS -->
	<script src="../js/jquery-1.10.2.js"></script>
	<!-- BOOTSTRAP SCRIPTS -->
	<script src="../js/bootstrap.min.js"></script>
	<!-- METISMENU SCRIPTS -->
	<script src="../js/jquery.metisMenu.js"></script>






	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<!-- 			<form action="../SelfExamGradeServlet" method="post"> -->
			<div class="modal-content" style="width: 800px; height: 500px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">
						竞赛评分: <input type="text" id="stuName"
							style="border: 0px; background: none;" disabled></input>
					</h4>
				</div>
				<div class="modal-body">
					<div style="width: 58%; float: left; padding: 20px 0px">
						学员答案
						<textarea id="tarea2" rows="15" cols="60"
							style="background: transparent" disabled="true"></textarea>
					</div>

					<div style="width: 35%; float: right; padding: 20px 0px">
						评语
						<textarea id="tarea3" rows="10" cols="35"
							style="background: transparent" name="comment"></textarea>

					</div>
					<input type="text" name="date" style="display: none;"
						id="modaldate"></input> <input type="text" name="userId"
						style="display: none;" id="modaluserid"></input>
					<div style="width: 35%; float: right; padding: 15px 0px"
						id="scorea">
						打分<br /> <input value="A" type="radio" name="score" id="scorea1">A
						&nbsp;&nbsp;&nbsp; <input value="B" type="radio" name="score"
							id="scorea1">B <br /> <input value="C" type="radio"
							name="score" id="scorea1">C &nbsp;&nbsp;&nbsp; <input
							value="D" type="radio" name="score" checked="checked"
							id="scorea1">D
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button onclick="submitmassage()" class="btn btn-primary"
						data-dismiss="modal">提交</button>
				</div>
			</div>
			<div></div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

</body>
</html>
